/*
* 配置方案构建->新增方案/修改方案
*
*/
import React, {Component,PureComponent} from 'react';
import { Modal, Button,Form ,message} from 'antd';
import { connect } from 'react-redux';
import {SchemeDetailTable,TargetSetTable} from './SchemeTable';

const FormItem = Form.Item;
const AddSchemeForm = Form.create()(
  (props) => {
  const {
    visible, 
    onCancel, 
    onCreate, 
    form,
    LargeAssetData,
    pdtList,
  } = props;
  console.log("AddScheme.js-",props);
  const { getFieldDecorator } = form;
    return (
      visible?
        <Modal
          visible={visible}
          title=""
          okText="保存"
          onCancel={onCancel}
          onOk={onCreate}
        >
        <Form layout="vertical">
          <SchemeDetailTable/>
          <TargetSetTable
            LargeAssetData={LargeAssetData}
            pdtList={pdtList}
          />
        </Form>
      </Modal>: null
    );
  }
)
const mapStateToProps = state => ({
  strategyName:state.configSconst.strategyName,
  strategyDescription:state.configSconst.strategyDescription,
  assets:state.configSconst.assets
});
const mapDispatchToProps = {
  addConfigureScheme:query=>({
    type:'configSconst/addConfigureScheme',
    payload: query || {},
  }),
  changeState: query => ({
    type: 'configSconst/changeState',
    payload: query || {},
  }),
};
@connect( mapStateToProps,mapDispatchToProps)
class AddScheme extends PureComponent {
  state = {
    visible: false,
  };
  // componentDidUpdate() {
  //   const screenHeight = Math.max(document.documentElement.offsetHeight, document.body.offsetHeight);
  //   const ele = document.querySelector('.add-panel .ant-modal-body');
  //   if (ele) {
  //     ele.style.height = `${screenHeight * 0.2}px`;
  //   }
  // }
  showModal = () => {
    this.setState({ visible: true });
  }
  handleCancel = () => {
    this.setState({ visible: false });
    const {changeState} =this.props;
    changeState({
      'assets':[],
      'strategyDescription':'',
      'strategyName':''
    })
  }
  handleCreate = () => {
    const {changeState} =this.props;
    const form = this.form;
    const {
      addConfigureScheme,
      strategyName,
      strategyDescription,
      assets
    } =this.props;
    console.log('handleCreate>add',this.props,assets)
    
    assets.forEach(function(item){
      item.assetId = item.AssetIndex;
      item.assetCode = item.AssetName
      delete item.key;
      delete item.AssetName;
      delete item.AssetIndex;
    })
    if(!_.isEmpty(strategyName)&&!_.isEmpty(assets)){
      assets.map((i)=>{
        if(i.assetCode !== "" && i.assetId !== ""){
          addConfigureScheme({
            strategyDescription,
            strategyName,
            assets
          })
          changeState({
            'assets':[],
            'strategyDescription':'',
            'strategyName':''
          })
          this.setState({ visible: false });
        }else if(i.assetCode == ""){
          message.warning('请确认已选择资产名称!');
        }else if(i.assetId == ""){
          message.warning('请确认已选择资产指数（基金）!');
        }
      })
    }else if(strategyName ==""){
      message.warning('请确认已输入方案名称!');
      this.setState({ visible: true });
    }else if(_.isEmpty(assets)){
      message.warning('请确认已选择标的设置!');
      
      this.setState({ visible: true });
    }
    
  }
  saveFormRef = (form) => {
    this.form = form;
  }
  render() {
    const {
      title,
      LargeAssetData,
      pdtList,
    } =this.props;
    console.log('AddScheme.js>>>',this.props)
    return (
      <div>
        <Button type="primary" onClick={this.showModal}>{title}
        </Button>
        <AddSchemeForm
          ref={this.saveFormRef}
          visible={this.state.visible}
          onCancel={this.handleCancel}
          onCreate={this.handleCreate}
          LargeAssetData={LargeAssetData}
          pdtList={pdtList}
        />
      </div>
    )
  }
}
export default Form.create({})(AddScheme);
